<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center">
      <div class="backgroudStyle">
        <el-card class="box-card"
                 style="border-radius: 12px;width: 100%;display: flex;flex-direction: column; height: 90vh">
          <div slot="header" class="clearfix">
            <span style="font-weight: initial;font-family: 'PingFang SC';font-size: 24px">个人信息</span>
            <el-button style="float: right;" @click="changeInfo">更改个人信息</el-button>
          </div>


          <div style="height: 100%">
            <!--        头像区域-->
            <div style="display: flex;align-items: center;justify-content: left;margin: 18px">
              <div class="block">
                <el-avatar :size="75" :src="this.userInfo.avatar_image"></el-avatar>
              </div>
              <div style="margin-left: 7px; display: flex;flex-direction: column;justify-content: left">
                <span style="margin-bottom: 8px; color: darkgray;font-family: 'PingFang SC';font-size: 12px">只支持JPG、JPEG格式的图片文件,文件像素为420x420</span>
                <div style="display: flex;justify-items: left">
                  <el-upload
                      action="http://localhost:39051/file/userInfoImgUpload"
                      :headers="{token:this.loginUser.token}"
                      list-type="picture"
                      :on-success="(res,file,fileList)=>handleAvatarSuccess(res,file,fileList)"
                  >
                    <el-button size="small" type="primary">更改头像</el-button>
                  </el-upload>

<!--                  <el-button type="primary" @click="changeAvatar">更改头像</el-button>-->
<!--                  <el-button style="float: right; padding: 3px 0;margin-left: 6px" type="text">删除图像</el-button>-->
                </div>
              </div>
            </div>
            <div style="display: flex;align-items: center;flex-direction: column ;width: 100%">


              <el-form label-position="top"
                       style="display: flex; justify-content: center;flex-direction: column;width: 100%"
                       :model="userInfo" :rules="infoRules">
                <!--                无法更改的内容：账号、职位、部门、-->
                <div style="display: flex ;justify-content: center;align-items: center">
                  <el-form-item label="账号" style="width: 100%;margin: 6px">
                    <el-input disabled='true' v-model="userInfo.name"></el-input>
                  </el-form-item>
                  <el-form-item label="职位" style="width: 100%;margin: 6px">
                    <el-input disabled='true' v-model="userInfo.roleName"></el-input>
                  </el-form-item>
                </div>

                <div style="display: flex ;justify-content: left;align-items: center">
                  <el-form-item label="部门" style="width: 48%;margin: 6px">
                    <el-input disabled='true' v-model="userInfo.depName"></el-input>
                  </el-form-item>
                </div>
                <!--                可以更改的内容：姓名、邮箱、电话、性别、个人介绍-->
                <div style="display: flex ;justify-content: center;align-items: center">
                  <el-form-item label="姓名" style="width: 100%;margin: 6px">
                    <el-input :disabled=isNotEdit v-model="userInfo.infoName"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" style="width: 100%;margin: 6px">
                    <el-input :disabled=isNotEdit v-model="userInfo.email"></el-input>
                  </el-form-item>
                </div>

                <div style="display: flex ;justify-content: center;align-items: center">
                  <el-form-item label="电话" style="width: 100%;margin: 6px">
                    <el-input :disabled=isNotEdit v-model="userInfo.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" style="width: 100%;margin: 6px" :disabled=isNotEdit>
                    <el-select placeholder="" style="width: 100%" v-model="userInfo.gender">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </el-form-item>
                </div>

                <div style="display: flex ;justify-content: center;align-items: center">
                  <el-form-item label="个人信息" style="width: 100%;margin: 6px">
                    <el-input type="textarea" :autosize="{ maxRows: 6}" :disabled=isNotEdit
                              v-model="userInfo.introduction" maxlength="30" show-word-limit></el-input>
                  </el-form-item>
                </div>


                <div style="display: flex ;justify-content: right;align-items: center;margin: 24px">
                  <el-form-item>
                    <el-button type="primary" @click="submitInfoChange" v-show="!isNotEdit">确认修改</el-button>
                    <el-button type="danger" @click="changeInfo" v-show="!isNotEdit">取消</el-button>
                  </el-form-item>
                </div>


              </el-form>
            </div>
          </div>


        </el-card>
      </div>


    </div>
  </div>
</template>

<script>
export default {
  name: "UserInformation",
  data() {

    var validPhone = (rule, value, callback) => {
      //校验中国电话号码的正则表达式
      const chinesePhoneNumberRegex = /^1[3456789]\d{9}$/;
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!chinesePhoneNumberRegex.test(value)) {
        callback(new Error('请输入正确的手机号！'))
      } else {
        callback();
      }
    }

    var validEmail = (rule, value, callback) => {
      //校验中国电话号码的正则表达式
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (value === '') {
        callback(new Error('请输入邮箱'))
      } else if (!emailRegex.test(value)) {
        callback(new Error('请输入正确的邮箱！'))
      } else {
        callback();
      }
    }

    return {
      isNotEdit: true,
      //user信息表单填充
      userInfo: {
        name: '', //账号
        phone: '', //电话
        email: '', //邮箱
        gender: '', //性别
        avatar_image: '', //头像url
        introduction: '',//个人介绍
        infoName: '',//用户真实姓名
        roleName: '',//用户职位名称
        depName: '' //用户所属部门名称
      },
      fileList:[],
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      imageUrl:'', //上传后的图片回显

      //表单校验规则
      infoRules: {
        infoName: [
          {required: true, message: '请输入用户名！', trigger: 'blur'}
        ],
        phone: [
          {validator: validPhone, trigger: 'blur'}
        ],
        email:[
          {validator: validEmail, trigger: 'blur'}
        ]
      }

    }

  },
  mounted() {
    //一加载页面，便发送请求获取到用户的所有信息返回
    this.$request.get("/user/getUserAllInfo", {
      params: {
        userId: JSON.parse(localStorage.getItem("loginUser")).uid
      }
    }).then(res => {
      if (res.successFlag) {
        this.userInfo = res.data
      } else {
        this.$message.error('获取当前用户信息失败！')
      }
    })
  },
  methods: {
    handleAvatarSuccess(res,file,fileList){
      console.log(res)
      console.log(file)
      console.log(fileList)
      console.log(this.userInfo)
      this.userInfo.avatar_image=res.data
      console.log(this.userInfo)
      //上传成功就刷新一下
      location.reload();
    },

    changeInfo() {
      //更改个人信息，则把之前的disable变成false
      this.isNotEdit = !this.isNotEdit;
    },
    submitInfoChange() {
      this.$request.post("/user/editUserAllInfo", this.userInfo).then(res => {
        if (res.successFlag) {
          this.$message.success('修改信息完成！')
          location.reload();
        } else {
          this.$message.error('修改信息失败！')
        }
      })
    }

  }
}
</script>

<style scoped>
.backgroudStyle {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 12px;
  height: 100vh;
  width: 42%;
}

</style>